<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .mydiv {
        border: 1px brown solid;
    }
    
    .myfather {
        border: 1px goldenrod solid;
    }
    
    .mybox {
        font-size: 50px;
        color: palevioletred;
    }
    
    .box {
        width: 400px;
        height: 450px;
    }
    
    div {
        padding: 40px;
        border: 1px solid;
        text-align: center
    }
    
    #outer {
        background: #ffcccc
    }
    
    #middle {
        background: #ccffcc
    }
    
    #inner {
        background: #ccccff
    }
</style>

<body>
    <div id="father" style="color: tomato; width: 1000px;" class="mydiv mybox" >
        父
        <div id="son" style="background-color:  skyblue; width: 500px;">子</div>
    </div>
    <img src="./OIP-C.jpg" width="300px" height="350px"><br>
    <input id="input1"></input>
    <div id="outer">爷爷
        <div id="middle">爸爸
            <div id="inner">儿子</div>
        </div>
    </div>
    <script>
        let father = document.getElementById("father")
        father.title = "happy"
        father.style.color = "blue"
        father.style.backgroundColor = "pink"
        console.log(father.title)

        father.setAttribute("title", "bad")
        let title = father.getAttribute("title")

        let img = document.getElementsByTagName("img")[0]
        console.log(img)

        img.src = "./OIP-C.jpg"
        img.style.border = "15px yellow solid"
        img.style.borderRadius = "50px"

        father.classList.add("mybox")
        father.classList.remove("mybox")
        father.classList.toggle("mybox")

        console.log("contains", father.classList.contains("mydiv"))

        father.addEventListener("click", function(event) {
            console.log("hi")
            father.classList.toggle("myfont")
            img.width = "150"
            img.height = "100"
            console.log(event.target)
        })
        img.addEventListener("click", function(event) {
            console.log("hihi")
            img.classList.toggle("box")
            console.log(event.target)
        })

        img.addEventListener("mousemove", function() {
            console.log("我在移动")
        })
        img.addEventListener("mouseleave", function() {
            console.log("我离开了")
        })
        img.addEventListener("mouseenter", function() {
            console.log("我又回来了")
        })


        let input1 = document.getElementById("input1")
        input1.addEventListener("keyup", function(event) {
            console.log("某个键抬起", event.key, event.code)
        })
        input1.addEventListener("keydown", function(event) {
                console.log("某个键放下", event.key, event.code)
            })

        let elements = [
            document.getElementById('outer'),
            document.getElementById('middle'),
            document.getElementById('inner')
        ];


        elements.forEach(el => {
            el.addEventListener('click', () => {
                console.log(`捕获阶段: ${el.id}`);
            }, true);
        });

        elements.forEach(el => {
            el.addEventListener('click', () => {
                console.log(`冒泡阶段: ${el.id}`);
            });
        });

        e.stopPropagation() 
        document.getElementById('middle').addEventListener('click', (e) => {
            console.log('阻止冒泡');
            e.stopPropagation();
        }, false);
    </script>
</body>

</html> 